<template>
  <div class="box home-sku-sale-stats bgc2">
    <div class="header">
      <div class="title">
        出货量统计<span class="sub-title"
          >2024.1 ~ 2024.12</span>
      </div>
    </div>
    <div class="body">
      <!-- 只显示出货量 -->
      <div class="stats">
        <div class="item">
          <div class="num color3 text-shadow2" style="font-weight:bold;">
            {{ shippedQuantity }}
          </div>
          <div class="text color4">出货量（件）
        </div>
        </div>
      </div>
      <!-- 显示出货最多类型 -->
      <div class="stats">
        <div class="item">
          <div class="num color3 text-shadow2" style="font-weight:bold;">
            {{ mostShippedType }}
          </div>
          <div class="text color4">出货最多类型</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs';

// 更新变量
const shippedQuantity = ref(12345); // 示例出货量数据
const mostShippedType = ref("生活用品"); // 示例出货最多类型数据
//const start = dayjs('2024.1').format('YYYY'); // 假设从2024年9月1日开始


// 定义方法
const orderCount = () => {
  // 此处可以保留或移除，取决于是否需要其他逻辑处理
};
</script>

<style lang="scss" scoped>
.home-sku-sale-stats {
  display: flex;
  flex-direction: column;
  height: calc((100vh - 120px) * 0.2);
  min-height: 166px;
  background: #E9F3FF;
  border-radius: 20px;

  .body {
    flex: 1;
    display: flex;

    .stats {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      .item {
        display: inline-flex; // 关键点
        flex-direction: column;

        .num {
          height: 50px;
          font-size: 36px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          line-height: 50px;
          text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
          color: #ff5757; // 设置数字颜色为红色
        }

        .text {
          height: 17px;
          margin-top: 3px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #de9690;
          line-height: 17px;
        }

        .color1 {
          color: #072074;
        }

        .color2 {
          color: #91a7dc;
        }

        .color3 {
          color: #ff5757;
        }

        .color4 {
          color: #de9690;
        }

        .text-shadow1 {
          text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
        }

        .text-shadow2 {
          text-shadow: 2px 4px 7px rgba(255, 99, 85, 0.5);
        }
      }
    }
  }
}
</style>